CSS Grid'i raja funktsioonid: dünaamilise paigutuse suuruse valdamine

CSS Grid on võimas paigutussüsteem, mis võimaldab veebiarendajatel luua keerukaid ja tundlikke kujundusi hõlpsalt. CSS Grid'i paindlikkuse keskmes on selle raja funktsioonid. Need funktsioonid, sealhulgas fr, minmax(), auto ja fit-content(), pakuvad mehhanisme võrgustiku radade (ridade ja veergude) suuruse dünaamiliseks määramiseks. Nende funktsioonide mõistmine on ülioluline CSS Grid'i valdamiseks ja paigutuste loomiseks, mis kohanduvad sujuvalt erinevate ekraanisuuruste ja sisu variatsioonidega.

Võrgustiku radade mõistmine

Enne konkreetsete raja funktsioonide juurde sukeldumist on oluline mõista, mis on võrgustiku rajad. Võrgustiku rada on ruum kahe võrgustikujoone vahel. Veerud on vertikaalsed rajad ja read on horisontaalsed rajad. Nende radade suurus määrab, kuidas sisu võrgustikus jaotatakse.

fr-ühik: murdosa ruumist

fr-ühik tähistab murdosa olemasolevast ruumist võrgustiku konteineris. See on võimas tööriist paindlike paigutuste loomiseks, kus veerud või read jagavad järelejäänud ruumi proportsionaalselt. Mõelge sellele kui viisile jaotada olemasolev ruum pärast seda, kui kõik muud fikseeritud suurusega rajad on arvesse võetud.

Kuidas fr töötab

Kui määratlete võrgustiku raja suuruse kasutades fr-ühikut, arvutab brauser saadaoleva ruumi, lahutades kõigi fikseeritud suurusega radade (nt pikslid, em-id) suuruse võrgustiku konteineri kogusuurusest. Järelejäänud ruum jaotatakse seejärel fr-ühikute vahel vastavalt nende suhtarvudele.

Näide: võrdsed veerud

Kolme võrdse laiusega veeru loomiseks saate kasutada järgmist CSS-i:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

            

              
                Copy
              
            
          

See kood jaotab olemasoleva ruumi võrdselt kolme veeru vahel. Kui võrgustiku konteiner on 600 pikslit lai, on iga veerg 200 pikslit lai (eeldades, et vahesid ega ääriseid pole).

Näide: proportsionaalsed veerud

Erinevate proportsioonidega veergude loomiseks saate kasutada erinevaid fr väärtusi:

            .grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

            

              
                Copy
              
            
          

Selles näites võtab esimene veerg kaks korda rohkem ruumi kui ülejäänud kaks veergu. Kui võrgustiku konteiner on 600 pikslit lai, on esimene veerg 300 pikslit lai ja ülejäänud kaks veergu kumbki 150 pikslit laiad.

Praktiline kasutusjuhtum: tundlik külgriba paigutus

fr-ühik on eriti kasulik tundlike külgriba paigutuste loomiseks. Kaaluge paigutust fikseeritud laiusega külgriba ja paindliku põhisisu alaga:

            .grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.sidebar {
  /* Sidebar styles */
}

.main-content {
  /* Main content styles */
}

            

              
                Copy
              
            
          

Selles seadistuses on külgriba alati 200 pikslit lai, samas kui põhisisu ala laieneb, et täita järelejäänud ruum. See paigutus kohandub automaatselt erinevate ekraanisuurustega, tagades, et sisu kuvatakse alati optimaalselt.

minmax() funktsioon: paindlikud suurusepiirangud

minmax() funktsioon määratleb võrgustiku raja jaoks vastuvõetavate suuruste vahemiku. See võtab kaks argumenti: minimaalne suurus ja maksimaalne suurus.

            minmax(min, max)

            

              
                Copy
              
            
          

Võrgustiku rada on alati vähemalt minimaalse suurusega, kuid see võib kasvada kuni maksimaalse suuruseni, kui ruumi on saadaval. See funktsioon on hindamatu väärtusega tundlike paigutuste loomisel, mis kohanduvad erinevate sisu pikkuste ja ekraanisuurustega.

Näide: veeru laiuse piiramine

Tagamaks, et veerg ei muutuks kunagi liiga kitsaks ega liiga laiaks, saate kasutada minmax() funktsiooni:

            .grid-container {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 1fr;
}

            

              
                Copy
              
            
          

Selles näites on esimene veerg vähemalt 200 pikslit lai, kuid see võib kasvada, et täita olemasolev ruum, kuni murdosani järelejäänud ruumist, mille määratleb 1fr. See takistab veeru muutumist liiga kitsaks väikestel ekraanidel või liiga laiaks suurtel ekraanidel. Teine veerg hõivab järelejäänud ruumi murdosana.

Näide: sisu ülevoolu vältimine

minmax() funktsiooni saab kasutada ka sisu ülevoolu vältimiseks oma konteinerist. Kaaluge stsenaariumi, kus teil on veerg, mis peaks mahutama muutuva koguse teksti:

            .grid-container {
  display: grid;
  grid-template-columns: 100px minmax(150px, auto) 100px;
}

            

              
                Copy
              
            
          

Siin on keskmine veerg vähemalt 150 pikslit lai. Kui sisu nõuab rohkem ruumi, laieneb veerg, et see mahutada. Maksimaalse väärtusena kasutatav võtmesõna auto käsib rajal end suurustada vastavalt selle sisule, tagades, et sisu ei voola kunagi üle. Kaks külgmist veergu jäävad fikseeritult 100 piksli laiuseks.

Praktiline kasutusjuhtum: tundlik pildigalerii

Kaaluge pildigalerii loomist, kus soovite kuvada pilte reas, kuid soovite tagada, et need ei muutuks liiga väikeseks väikestel ekraanidel ega liiga suureks suurtel ekraanidel:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 10px;
}

.grid-item {
  /* Image styles */
}

            

              
                Copy
              
            
          

repeat(auto-fit, minmax(150px, 1fr)) on võimas kombinatsioon. auto-fit kohandab veergude arvu automaatselt vastavalt olemasolevale ruumile. minmax(150px, 1fr) tagab, et iga pilt on vähemalt 150 pikslit lai ja võib kasvada, et täita olemasolev ruum. See loob tundliku pildigalerii, mis kohandub erinevate ekraanisuurustega, pakkudes ühtlast vaatamiskogemust. Kaaluge object-fit: cover; lisamist .grid-item CSS-ile, et tagada piltide korrektne ruumi täitmine ilma moonutusteta.

auto võtmesõna: sisupõhine suuruse määramine

Võtmesõna auto annab võrgustikule korralduse suurustada rada vastavalt selle sisule. Rada laieneb, et mahutada sisu, kuid see ei kahane väiksemaks kui sisu minimaalne suurus.

Kuidas auto töötab

Kui kasutate auto, määratakse võrgustiku raja suurus selle sees oleva sisu sisemise suuruse järgi. See on eriti kasulik stsenaariumide puhul, kus sisu suurus on ettearvamatu või muutuv.

Näide: paindlik veerg teksti jaoks

Kaaluge paigutust, kus teil on veerg, mis peab mahutama muutuva koguse teksti:

            .grid-container {
  display: grid;
  grid-template-columns: 200px auto 1fr;
}

            

              
                Copy
              
            
          

Selles näites on esimene veerg fikseeritud 200 piksli laiuseks. Teine veerg on seatud väärtusele auto, seega laieneb see, et mahutada selle sees olev tekstisisu. Kolmas veerg kasutab järelejäänud ruumi murdosana ja on paindlik.

Näide: muutuva kõrgusega read

Saate kasutada auto ka ridade jaoks. See on kasulik, kui teil on ridu, mille sisu kõrgus võib varieeruda:

            .grid-container {
  display: grid;
  grid-template-rows: auto auto auto;
}

            

              
                Copy
              
            
          

Sellisel juhul kohandab iga rida automaatselt oma kõrgust, et mahutada selle sees olev sisu. See on abiks dünaamilise sisuga paigutuste loomisel, näiteks blogipostituste või artiklite puhul, millel on erinevas koguses teksti ja pilte.

Praktiline kasutusjuhtum: tundlik navigeerimismenüü

Saate kasutada auto, et luua tundlik navigeerimismenüü, kus iga menüüelemendi laius kohandub vastavalt selle sisule:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, auto);
  grid-gap: 10px;
}

.menu-item {
  /* Menu item styles */
}

            

              
                Copy
              
            
          

Kasutades repeat(auto-fit, auto), luuakse nii palju veerge, kui on vaja menüüelementide mahutamiseks, kusjuures iga elemendi laius määratakse selle sisu järgi. Võtmesõna auto-fit tagab, et elemendid murduvad väiksematel ekraanidel järgmisele reale. Ärge unustage ka menu-item'i stiilida, et tagada korrektne kuva ja esteetika.

fit-content() funktsioon: sisupõhise suuruse piiramine

Funktsioon fit-content() pakub viisi piirata võrgustiku raja suurust vastavalt selle sisule. See võtab ühe argumendi: maksimaalne suurus, mida rada võib hõivata. Rada laieneb, et mahutada sisu, kuid see ei ületa kunagi määratud maksimaalset suurust.

            fit-content(max-size)

            

              
                Copy
              
            
          

Kuidas fit-content() töötab

Funktsioon fit-content() arvutab võrgustiku raja suuruse vastavalt selle sisule. Siiski tagab see, et raja suurus ei ületa kunagi funktsiooni argumendis määratud maksimaalset suurust.

Näide: veeru laienemise piiramine

Kaaluge paigutust, kus soovite, et veerg laieneks oma sisu mahutamiseks, kuid te ei soovi, et see muutuks liiga laiaks:

            .grid-container {
  display: grid;
  grid-template-columns: 100px fit-content(300px) 1fr;
}

            

              
                Copy
              
            
          

Selles näites laieneb teine veerg oma sisu mahutamiseks, kuid see ei ületa kunagi 300 piksli laiust. Kui sisu nõuab rohkem kui 300 pikslit, kärbitakse veergu 300 piksli juures (välja arvatud juhul, kui olete võrgustiku elemendile määranud overflow: visible). Esimene veerg jääb fikseeritud laiusega ja viimane veerg saab järelejäänud ruumi murdosana.

Näide: rea kõrguse kontrollimine

Saate kasutada fit-content() ka ridade jaoks, et kontrollida nende kõrgust:

            .grid-container {
  display: grid;
  grid-template-rows: fit-content(200px) 1fr;
}

            

              
                Copy
              
            
          

Siin laieneb esimene rida oma sisu mahutamiseks, kuid see ei ületa kunagi 200 piksli kõrgust. Teine rida võtab ülejäänud ruumi murdosana kogu saadaolevast kõrgusest.

Praktiline kasutusjuhtum: tundlik kaartide paigutus

fit-content() on kasulik tundlike kaartide paigutuste loomiseks, kus soovite, et kaardid laieneksid oma sisu mahutamiseks, kuid soovite piirata nende laiust:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, fit-content(300px)));
  grid-gap: 10px;
}

.card {
  /* Card styles */
}

            

              
                Copy
              
            
          

See kood loob tundliku kaartide paigutuse, kus iga kaart on vähemalt 200 pikslit lai ja võib laieneda oma sisu mahutamiseks, kuni maksimaalselt 300 pikslini. repeat(auto-fit, ...) tagab, et kaardid murduvad väiksematel ekraanidel järgmisele reale. Kordusfunktsiooni sees minmax kasutamine koos fit-content'iga annab veelgi kõrgema kontrolli taseme - tagades, et elementidel on alati minimaalne laius 200 pikslit, kuid nad ei ole kunagi laiemad kui 300 pikslit (eeldusel, et sisu sees ei ületa seda väärtust). See strateegia on eriti väärtuslik, kui soovite ühtlast ilmet ja tunnetust erinevatel ekraanisuurustel. Ärge unustage stiilida .card klassi sobivate polstrite, marginaalide ja muude visuaalsete omadustega, et saavutada soovitud välimus.

Raja funktsioonide kombineerimine täiustatud paigutuste jaoks

CSS Grid'i raja funktsioonide tõeline jõud peitub nende kombineerimises keerukate ja dünaamiliste paigutuste loomiseks. Kasutades strateegiliselt fr, minmax(), auto ja fit-content() funktsioone, saate saavutada laia valiku tundlikke ja paindlikke kujundusi.

Näide: segatud ühikud ja funktsioonid

Kaaluge paigutust fikseeritud laiusega külgriba, paindliku põhisisu ala ja veeruga, mis laieneb oma sisu mahutamiseks, kuid millel on maksimaalne laius:

            .grid-container {
  display: grid;
  grid-template-columns: 200px 1fr fit-content(400px);
}

            

              
                Copy
              
            
          

Selles näites on esimene veerg fikseeritud 200 piksli laiuseks. Teine veerg võtab järelejäänud ruumi kasutades 1fr. Kolmas veerg laieneb oma sisu mahutamiseks, kuid on piiratud maksimaalse laiusega 400 pikslit kasutades fit-content(400px).

Näide: keerukas tundlik disain

Loome keerukama näite veebisaidi paigutusest päise, külgriba, põhisisu ja jalusega:

            .grid-container {
  display: grid;
  grid-template-columns: minmax(150px, 250px) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  height: 100vh;
}

header {
  grid-area: header;
  /* Header styles */
}

.sidebar {
  grid-area: sidebar;
  /* Sidebar styles */
}

main {
  grid-area: main;
  /* Main content styles */
}

footer {
  grid-area: footer;
  /* Footer styles */
}

            

              
                Copy
              
            
          

Selles paigutuses:

• grid-template-columns määratleb kaks veergu: külgriba minimaalse laiusega 150 pikslit ja maksimaalse laiusega 250 pikslit ning põhisisu ala, mis võtab järelejäänud ruumi kasutades 1fr.
• grid-template-rows määratleb kolm rida: päis ja jalus, mis kohandavad automaatselt oma kõrgust vastavalt sisule (auto), ning põhisisu ala, mis võtab järelejäänud vertikaalse ruumi kasutades 1fr.
• grid-template-areas atribuut määratleb paigutuse struktuuri kasutades nimega võrgustiku alasid.

See näide demonstreerib, kuidas kombineerida raja funktsioone ja võrgustiku alasid, et luua paindlik ja tundlik veebisaidi paigutus. Ärge unustage lisada igale jaotisele (päis, külgriba, põhiosa, jalus) sobivat stiili, et tagada korrektne visuaalne esitus.

Parimad tavad CSS Grid'i raja funktsioonide kasutamiseks

Et CSS Grid'i raja funktsioonidest maksimumi võtta, kaaluge järgmisi parimaid tavasid:

• Eelistage sisu: Raja suuruste määramisel eelistage alati sisu. Paigutus peaks kohanduma sisuga, mitte vastupidi.
• Kasutage minmax() tundlikkuse tagamiseks: Kasutage minmax() funktsiooni, et määratleda võrgustiku radade jaoks vastuvõetavate suuruste vahemik, tagades, et need kohanduvad erinevate ekraanisuuruste ja sisu variatsioonidega.
• Kombineerige funktsioone strateegiliselt: Kombineerige raja funktsioone, et luua keerukaid ja dünaamilisi paigutusi. Näiteks kasutage minmax() ja fr koos, et luua paindlikke veerge, millel on minimaalsed ja maksimaalsed laiusepiirangud.
• Testige erinevatel seadmetel: Testige oma paigutusi alati erinevatel seadmetel ja ekraanisuurustel, et tagada nende tundlikkus ja visuaalne atraktiivsus.
• Arvestage ligipääsetavusega: Tagage, et teie paigutused on ligipääsetavad kõigile kasutajatele, sealhulgas puuetega inimestele. Kasutage semantilist HTML-i ja pakkuge piltidele alternatiivset teksti.
• Kasutage Grid Inspector'i tööriistu: Enamikul kaasaegsetel brauseritel on sisseehitatud Grid Inspector'i tööriistad, mis aitavad teil oma võrgustiku paigutusi visualiseerida ja siluda. Need tööriistad võivad olla hindamatud mõistmaks, kuidas raja funktsioonid teie paigutust mõjutavad.

Globaalsed kaalutlused CSS Grid'i puhul

Globaalsele publikule veebisaitide arendamisel on oluline arvestada kultuuriliste erinevuste ja piirkondlike variatsioonidega. Siin on mõned CSS Grid'i spetsiifilised kaalutlused:

• Paigutuse suund (direction atribuut): Atribuuti direction saab kasutada võrgustiku paigutuse suuna muutmiseks. Näiteks paremalt vasakule (RTL) keeltes nagu araabia ja heebrea, saate paigutuse suuna ümberpööramiseks seada direction: rtl;. CSS Grid kohandub automaatselt paigutuse suunaga, tagades, et paigutus kuvatakse korrektselt erinevates keeltes.
• Loogilised atribuudid (inset-inline-start, inset-inline-end jne): Füüsiliste atribuutide nagu left ja right asemel kasutage loogilisi atribuute nagu inset-inline-start ja inset-inline-end. Need atribuudid kohanduvad automaatselt paigutuse suunaga, tagades, et paigutus on järjepidev nii LTR kui ka RTL keeltes.
• Fondi suurused: Olge tähelepanelik oma võrgustiku elementides kasutatavate fondi suuruste suhtes. Erinevad keeled võivad optimaalse loetavuse tagamiseks nõuda erinevaid fondi suurusi. Kaaluge suhteliste ühikute nagu em või rem kasutamist, et fondi suurused saaksid skaleeruda vastavalt kasutaja eelistustele.
• Kuupäeva ja numbri vormingud: Kui teie võrgustiku paigutus sisaldab kuupäevi või numbreid, vormindage need kindlasti kasutaja lokaadi jaoks korrektselt. Kasutage JavaScripti või serveripoolset teeki kuupäevade ja numbrite vormindamiseks vastavalt kasutaja keele- ja piirkonnaseadetele.
• Pildid ja ikoonid: Olge teadlik, et mõnedel piltidel ja ikoonidel võib olla erinevates kultuurides erinev tähendus või konnotatsioon. Vältige piltide või ikoonide kasutamist, mis võivad olla solvavad või kultuuriliselt tundlikud. Näiteks käemärk, mida ühes kultuuris peetakse positiivseks, võib teises olla solvav.
• Tõlge ja lokaliseerimine: Kui teie veebisait on saadaval mitmes keeles, tõlkige kindlasti kogu tekst oma võrgustiku paigutuses, sealhulgas pealkirjad, sildid ja sisu. Kaaluge tõlke haldussüsteemi kasutamist, et tõlkeprotsessi sujuvamaks muuta ja tagada järjepidevus erinevates keeltes.

Kokkuvõte

CSS Grid'i raja funktsioonid on olulised tööriistad dünaamiliste ja tundlike paigutuste loomiseks, mis kohanduvad erinevate ekraanisuuruste ja sisu variatsioonidega. Valdades fr, minmax(), auto ja fit-content() funktsioone, saate ehitada keerukaid ja paindlikke paigutusi, mis pakuvad ühtlast ja kaasahaaravat kasutajakogemust kõigil seadmetel ja platvormidel. Ärge unustage eelistada sisu, kasutada minmax() funktsiooni tundlikkuse tagamiseks, kombineerida funktsioone strateegiliselt ja testida erinevatel seadmetel, et tagada oma paigutuste visuaalne atraktiivsus ja ligipääsetavus kõigile kasutajatele. Arvestades keele ja kultuuri globaalseid kaalutlusi, saate luua veebisaite, mis on ligipääsetavad ja kaasahaaravad globaalsele publikule.

Praktika ja katsetamisega saate rakendada CSS Grid'i raja funktsioonide täit potentsiaali ja luua vapustavaid ning tundlikke paigutusi, mis tõstavad teie veebiarenduse oskusi ja pakuvad teie publikule paremat kasutajakogemust.